<template>
  <div class="organize-detail">
    <div class="title">机构详情</div>
    <div class="content">
      <div class="info">
        <div class="desc">
          <div class="name">
            <span>{{data.organizationName}}</span> / 组织形式：
            <template v-if="data.organizationWay === 1">合伙</template>
            <template v-if="data.organizationWay === 2">个人</template>
            <template v-if="data.organizationWay === 3">合资</template>
          </div>
          <div class="leader">
            <span>负责人：{{data.responsiblePerson}}</span>
            <span>联系电话：{{data.phone}}</span>
            <span>机构地址：{{data.organizationArea}}</span>
          </div>
          <div class="organize-desc">机构简介：{{data.organizationIntroduce}}</div>
        </div>
        <div class="btn">
          <a-button type="primary" @click="onAdd()">新增律师</a-button>
        </div>
      </div>
      <a-alert :message="`截至目前，已接待人次 ${maxNum}`" type="info" show-icon />
      <div class="table">
        <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading"
          :columns="columns" :dataSource="pageData" @change="onTableChange">
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="onEdit(record)" type="link" style="padding: 0">编辑</a-button>
            <a-divider type="vertical" />
            <a-button @click="onDetail(record)" type="link" style="padding: 0">详情</a-button>
            <a-divider type="vertical" />
            <a-popconfirm title="是否要删除记录吗?" ok-text="是" cancel-text="否" @confirm="onDelete(record)">
              <a style="color: #333;">删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
          </template>
        </z-table>
      </div>
    </div>
  
    <LawyerModal ref="LawyerModal" @success="onQuery()" :disabled="isDetail"></LawyerModal>
  
  </div>
</template>

<script>
  import { lawFirmDetail, lawyerList, deleteLawyer, lawyerMaxNum } from '@/api/sjsk/legalAid/organize'
  import LawyerModal from '../modules/LawyerModal.vue'
  export default{
    components: {
      LawyerModal
    },
    data() {
      return {
        isDetail: false,
        data: {},
        loading: false,
        maxNum: 0,
        businessAreaMap: {
          '1': '合同纠纷',
          '2': '公司事务',
          '3': '刑事案件',
          '4': '债权纠纷',
          '5': '医疗纠纷',
          '6': '婚姻继承',
          '8': '劳动纠纷',
          '9': '知识产权',
          '10': '侵权纠纷',
          '11': '涉外纠纷',
          '12': '金融证券',
          '13': '拆迁安置',
          '14': '房产土地',
          '15': '工程建筑',
          '16': '物权纠纷',
          '17': '损害赔偿',
          '18': '国际事务',
          '19': '行政案件',
          '20': '工伤维权',
          '21': '公益法律',
        },
        columns: [
          {
            title: '序号',
            dataIndex: 'order',
            width: 60,
            align: 'center',
            customRender: (text, record, index) =>
              `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          },
          {
            title: '姓名',
            dataIndex: 'lawyerName',
            align: 'center',
            customRender: (text) => {
              
              return <j-ellipsis value={text} length={20} />
            },
          },
          {
            title: '联系电话',
            dataIndex: 'lawyerPhone',
            align: 'center',
            customRender: (text) => {
              return <j-ellipsis value={text} length={14} />
            },
          },
          {
            title: '擅长领域',
            dataIndex: 'businessArea',
            align: 'center',
            customRender: (text) => {
              const list = text.split(',').map(item => {
                return this.businessAreaMap[item]
              })
              console.log(list)
              
              return <j-ellipsis value={list.toString()} length={14} />
            },
          },
          {
            title: '接待人次',
            dataIndex: 'receptionNum',
            align: 'center',
            customRender: (text) => {
              return text || 0
            },
          },
          {
            title: '操作',
            width: 160,
            align: 'center',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
          },
        ],
        pageFilter: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData: {
          records: []
        },
      }
    },
    computed: {
      
    },
    created() {
      this.getDetail()
      this.onQuery()
      this.getMaxNum()
    },
    methods: {
      getMaxNum() {
        lawyerMaxNum(this.$route.query.id).then(res => {
          const { result } = res
          this.maxNum = result
        })
      },
      getDetail() {
        lawFirmDetail(this.$route.query.id).then(res => {
          const { result } = res
          this.data = result
        })
      },
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = { currentPage: 'pageNo' }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
        let form = Object.assign({}, this.form, this.pageFilter)
        this.loading = true
        form.lawFirmId = this.$route.query.id
        lawyerList(form)
          .then((res) => {
            if (res.success) {
              this.pageData = res.result ? res.result : {}
              this.loading = false
              this.$refs.table.onClearRowKeys()
            } else {
              this.loading = false
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
      
      onAdd() {
        this.isDetail = false
        this.$refs.LawyerModal.show(null, this.$route.query.id)
      },
      onEdit(item) {
        this.isDetail = false
        this.$refs.LawyerModal.show(JSON.parse(JSON.stringify(item)), this.$route.query.id)
      },
      onDetail(item) {
        this.isDetail = true
        this.$refs.LawyerModal.show(item, this.$route.query.id)
      },
      onDelete(item) {
        const { id,  lawyerName} = item
        this.$confirm({
          title: '确认提示',
          content: `是否确定删除${lawyerName}`,
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            deleteLawyer({id}).then(res => {
              this.onQuery()
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .organize-detail{
    padding: 0 20px;
    background-color: #fff;
    .title{
      border-bottom: 1px solid #eee;
      padding: 20px 0;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .content{
      .info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .desc{
          .name{
            span{
              font-size: 22px;
              font-weight: bold;
            }
          }
          .leader{
            span{
              margin-right: 50px;
            }
          }
          >div{
            margin-bottom: 15px;
          }
        }
      }
      .table{
        margin-top: 20px;
      }
    }
  }
</style>